<template>
  <el-dialog
    title="微信提现"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    width="460px"
    top="25vh"
  >
    <div class="verify-wxpay">
      <el-form
        v-if="wxpayVerify"
        class="verify-wxpay-from"
        label-width="80px"
        :model="verifyForm"
        :rules="verifyRules"
        ref="verifyForm"
        size="small"
      >
        <el-form-item label="默认账号">
          <el-row type="flex"
            ><el-input type="text" :value="phone | formatMask" :disabled="true"></el-input
          ></el-row>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <div class="verify-code">
            <el-input type="text" v-model="verifyForm.code" placeholder="请输入验证码"></el-input>
            <EduVerificationCode
              btnType="text"
              @start="handleCode('verifyForm')"
            ></EduVerificationCode>
          </div>
        </el-form-item>
        <el-row type="flex" justify="center"
          ><el-button type="primary" @click="handleSubmit('verifyForm')" size="small"
            >提交</el-button
          ></el-row
        >
      </el-form>
      <div v-else>
        <el-row type="flex" justify="center"
          ><vue-qr :text="wxpayQrcode" :size="200" :margin="0"></vue-qr
        ></el-row>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import projectSetting from '@/settings/projectSetting.js'
import EduVerificationCode from '@/components/EduVerificationCode'
import vueQr from 'vue-qr'
export default {
  props: {
    visible: {
      type: Boolean
    },
    money: {
      type: Number
    }
  },
  inject: ['reload'],
  components: {
    vueQr,
    EduVerificationCode
  },
  data() {
    return {
      phone: this.$store.getters['user/accountInfo'].phone,
      verifyRules: {
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      },
      verifyForm: {
        code: '',
        openid: ''
      },
      wxpayVerify: true,
      wxpayQrcode: '',
      order_no: '',
      timer: null,
      time: 1000,
      count: 0
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    handleSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.createIncomeEncashmentWxpay(
            {
              money: this.money,
              wxpay_openid: this.verifyForm.openid,
              verify_code: this.verifyForm.code,
              redirect_uri: projectSetting.globLocalHost + '/pageUser/user/weixinpc'
            },
            res => {
              this.wxpayQrcode = res.data
              this.order_no = res.data.split('&order=')[1]
              this.wxpayVerify = false
              // 定时请求
              //定时器
              setTimeout(() => {
                this.timer = setInterval(() => {
                  this.count += 1
                  if (this.count >= 50) {
                    // 销毁定时器
                    clearInterval(this.timer)
                    this.timer = null
                  } else if (this.count >= 40) {
                    this.time = 30000
                  } else if (this.count >= 30) {
                    this.time = 1000
                  } else if (this.count >= 20) {
                    this.time = 5000
                  }
                  this.handleCheck()
                }, this.time)
              }, 3000)
            },
            error => {
              this.$message.error(error.msg)
            }
          )
        }
      })
    },
    // 检查状态
    handleCheck() {
      this.$api.createIncomeEncashmentWxpayCheck(
        {
          order_no: this.order_no
        },
        res => {
          if (res.data) {
            this.$message.success(res.msg)
            // 销毁定时器
            clearInterval(this.timer)
            this.timer = null
            this.count = 0
            this.handleClose()
            this.reload()
          }
        },
        error => {
          // this.$message.error(error.msg);
          // 销毁定时器
          // clearInterval(this.timer);
          // this.timer = null;
          // this.handleClose();
        }
      )
    },
    // 获取验证码
    handleCode() {
      this.$api.createSmsVerify(
        {
          phone: this.phone.toString(),
          type: 'wxpay'
        },
        res => {
          this.$message.success(res.msg)
        }
      )
    },
    handleLink() {
      this.$emit('other')
    },
    // 关闭弹窗
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid $border-color-divider;
}
.verify-wxpay {
  background: #fff;
  .verify-wxpay-from {
    ::v-deep .el-input {
      width: 224px;
      .el-input__inner {
        border-radius: 0px;
      }
      .el-input-group__append {
        border-radius: 0px;
        padding: 0 10px;
        background-color: #fff;
        @include edu-color-auxiliary;
      }
      &.is-disabled .el-input__inner {
        background-color: #fff;
        color: $text-color-auxiliary;
        cursor: default;
      }
    }
    .el-link {
      margin-left: 10px;
    }
    .verify-code {
      width: 224px;
      border: 1px solid #dcdfe6;
      ::v-deep .el-input {
        width: 145px;
        .el-input__inner {
          border: 0;
        }
      }
    }
  }
}
</style>
